<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>v-for 遍历复杂数据</title>
	<style>
		.hr {
		  border: 1px solid black; 
		}
		h2, h3{
			background-color: #000;
			color: #fff;
		}
	</style>
</head>
<body>
    <div id="app">
        <h2>全部课程</h2>
        <!-- 使用 v-for 遍历 productList 中的每个对象（pc 和 app） -->
        <div id="" v-for="product in productList">
            <h3>{{ product.title }}</h3>
            <ul>
                <!-- 对于每个对象中的 list 数组，再次使用 v-for 遍历其中的每个元素（item）和对应的索引（index） -->
                <li v-for="(item,index) in product.list">
                    <!-- 使用 :href 进行动态绑定，将 item.url 作为链接地址 -->
                    <a :href="item.url"> {{ item.name }}</a>
                </li>
            </ul>
            <!-- 如果当前对象的 last 属性为 false，则显示一个分隔线 -->
            <div id="" v-if="!product.last" class="hr">

            </div>
        </div>
    </div>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                productList: {
                    pc: {
                        title: '前端技术',
                        list: [{
                                name: 'HTML+CSS',
                                url: 'http://html.com'
                            },
                            {
                                name: 'JavaScript',
                                url: 'http://javascript.com'
                            },
                            {
                                name: 'Vue',
                                url: 'http://vue.com'
                            },
                            {
                                name: 'Node',
                                url: 'http://node.com'
                            }
                        ]
                    },
                    app: {
                        title: '后端技术',
                        list: [{
                                name: 'Java',
                                url: 'http://java.com'
                            }, {
                                name: 'Python',
                                url: 'http://python.org'
                            },
                            {
                                name: 'Ruby on Rails',
                                url: 'http://rubyonrails.org'
                            },
                            {
                                name: 'Go',
                                url: 'http://golang.org'
                            }
                        ]
                    }
                }
            }
        })
    </script>
</body>
</html>